<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>日照消防志愿者协会后台管理</title>
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="robots" content="noindex,nofollow">
    <!-- HTML5 shim for IE8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <![endif]-->
    <link href="__TMPL__/public/assets/themes/{:cmf_get_admin_style()}/bootstrap.min.css" rel="stylesheet">
    <link href="__STATIC__/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="__TMPL__/public/assets/themes/{:cmf_get_admin_style()}/login.css" rel="stylesheet">
    <link href="__STATIC__/css/style.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
    <script>
        if (window.parent !== window.self) {
            document.write              = '';
            window.parent.location.href = window.self.location.href;
            setTimeout(function () {
                document.body.innerHTML = '';
            }, 0);
        }
    </script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #canvas{
            position: absolute;
        }
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .captcha{
        width: 50%;height: 100%;
        }
        @media screen and (max-width:1000px){
            .form-control{
                height: 100px;
                font-size:50px;
            }
            .wrap{
                margin-top: 20%
            }
            /*.captcha{*/
                /*width: 50%;*/
                /*height: 98px;*/
            /*}*/
            .text-center{
                height: 90px;
            }
            .btn{
                height: 90px;
                font-size:50px
            }

        }


    </style>
</head>

<body>

<canvas id="canvas" style="background: rgb(224,122,122)"></canvas>
<div class="wrap overflow" >
    <div class="container" style="width: 100%;position:absolute;" >
        <div class="row">

        <div class="main-w3l">
            <div class="w3layouts-main">
                <h2>日照消防志愿者协会后台管理</h2>
                <form class="js-ajax-form" action="{:url('public/doLogin')}" method="post">
                    <div class="form-group">
                    <input type="text" id="input_username" class="form-control" name="username"
                    placeholder="{:lang('USERNAME_OR_EMAIL')}" title="{:lang('USERNAME_OR_EMAIL')}"
                    value="{:cookie('admin_username')}" data-rule-required="true" data-msg-required=""  >
                    </div>

                    <div class="form-group">
                    <input type="password" id="input_password" class="form-control" name="password"
                    placeholder="{:lang('PASSWORD')}" title="{:lang('PASSWORD')}" data-rule-required="true"
                    data-msg-required="">
                    </div>

                    <div class="form-group">
                    <div style="position: relative;">
                    <input type="text" name="captcha" placeholder="验证码" class="form-control captcha">
                    <captcha height="100px" width="250px" font-size="18"
                    style="cursor: pointer;position:absolute;right:1px;top:1px;"/>
                    </div>
                    </div>
                    <button class="btn btn-primary btn-block js-ajax-submit" type="submit"
                    data-loadingmsg="{:lang('LOADING')}">
                    {:lang('LOGIN')}
                        </button>
                    <!--<input type="submit" value="登 录"  class="btn btn-primary btn-block js-ajax-submit" name="login">-->
                </form>


            </div>
        </div>
        <!--<div class="row">-->
            <!--<div class="col-md-4 col-md-offset-4">-->
                <!--<h1 class="text-center">日照牵手-啄木鸟志愿者服务网站  后台管理</h1>-->
                <!--<form class="js-ajax-form" action="{:url('public/doLogin')}" method="post">-->
                    <!--<div class="form-group">-->
                        <!--<input type="text" id="input_username" class="form-control" name="username"-->
                               <!--placeholder="{:lang('USERNAME_OR_EMAIL')}" title="{:lang('USERNAME_OR_EMAIL')}"-->
                               <!--value="{:cookie('admin_username')}" data-rule-required="true" data-msg-required=""  >-->
                    <!--</div>-->

                    <!--<div class="form-group">-->
                        <!--<input type="password" id="input_password" class="form-control" name="password"-->
                               <!--placeholder="{:lang('PASSWORD')}" title="{:lang('PASSWORD')}" data-rule-required="true"-->
                               <!--data-msg-required="">-->
                    <!--</div>-->

                    <!--<div class="form-group">-->
                        <!--<div style="position: relative;">-->
                            <!--<input type="text" name="captcha" placeholder="验证码" class="form-control captcha">-->
                            <!--<captcha height="100px" width="250px" font-size="18"-->
                                     <!--style="cursor: pointer;position:absolute;right:1px;top:1px;"/>-->
                        <!--</div>-->
                    <!--</div>-->

                    <!--<div class="form-group">-->
                        <!--<input type="hidden" name="redirect" value="">-->
                        <!--<button class="btn btn-primary btn-block js-ajax-submit" type="submit" style="margin-left: 0px;background-color: rgb(156,196,197)"-->
                                <!--data-loadingmsg="{:lang('LOADING')}">-->
                            <!--{:lang('LOGIN')}-->
                        <!--</button>-->
                    <!--</div>-->

                <!--</form>-->
            <!--</div>-->
        <!--</div>-->

    </div>
</div>

<script type="text/javascript">
    //全局变量
    var GV = {
        ROOT: "__ROOT__/",
        WEB_ROOT: "__WEB_ROOT__/",
        JS_ROOT: "static/js/",
        APP: ''/*当前应用名*/
    };
</script>
<script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
<script src="__STATIC__/js/wind.js"></script>
<script src="__STATIC__/js/admin.js"></script>
<script src="__TMPL__/public/assets/js/ball.js"></script>
<script src="__TMPL__/public/assets/js/utils.js"></script>
<script>
    (function () {
        document.getElementById('input_username').focus();
    })();
    window.addEventListener("load", function() {
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var mouse = utils.captureMouse(canvas);

        var balls = [];
        var numBalls = 30,
                minDist = 200;
        // springAmount = 0.0005;
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        //遍历实例化球，并初始化
        for (var size, ball, i = 0; i < numBalls; i++) {
            size = Math.random() * 10 + 2;
            ball = new Ball(size, "#fff");
            ball.x = Math.random() * canvas.width;
            ball.y = Math.random() * canvas.height;
            //随机向量
            ball.vx = Math.random() * 6 - 3;
            ball.vy = Math.random() * 6 - 3;
            ball.mass = size;
            balls.push(ball);
        };

        function spring(partA, partB) {
            var dx = partB.x - partA.x,
                    dy = partB.y - partA.y,
                    dist = Math.sqrt(dx * dx + dy * dy);
            if (dist < minDist) {
                var alpha = 1 - dist / minDist;
                ctx.strokeStyle = utils.colorToRGB("#ffffff", alpha);
                ctx.beginPath();
                ctx.moveTo(partA.x, partA.y);
                ctx.lineTo(partB.x, partB.y);
                ctx.stroke();
            }
        }

        //移动的方法
        function move(partA) {
            partA.x += partA.vx;
            partA.y += partA.vy;
            if (partA.x > canvas.width) {
                partA.x = 0;
            } else if (partA.x < 0) {
                partA.x = canvas.width;

            }
            if (partA.y > canvas.height) {
                partA.y = 0;
            } else if (partA.y < 0) {
                partA.y = canvas.height;
            }
            for (var partB, i = 0, j = i; j < numBalls; j++) {
                partB = balls[j];
                spring(partA, partB);
            }

        }

        //绘画方法
        function draw(ball) {
            ball.draw(ctx);
        };
        //实现绘画
        (function drawFrame() {
            window.requestAnimationFrame(drawFrame, canvas);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            balls.forEach(move);
            balls.forEach(draw);
        })();

    }, false);
</script>
</body>
</html>
